<template>
  <el-carousel :interval="3000" arrow="always" height="100vh">
    <el-carousel-item v-for="(item, index) in imgs" :key="index">
      <img :src="item.img" alt="" />
    </el-carousel-item>
  </el-carousel>
  <div class="box">
    <div class="title">寻 亲 信 息 发 布</div>
    <a href="javascript:;" class="more" @click="goMore">查看更多信息是☛</a>
  </div>

  <!-- 异步加载组件 -->

  <Asyncloading>
    <template v-slot>
      <Homeimgs />
    </template>
  </Asyncloading>
</template>

<script lang="ts" setup>
import { defineAsyncComponent, reactive } from "vue";
//异步组件加载器
import Asyncloading from "@/components/common/AsyncComp/asyncloading.vue";
import { useRouter } from "vue-router";
const router = useRouter();

//异步加载组件
const Homeimgs = defineAsyncComponent(
  () => import("@/components/common/AsyncComp/homeimgs.vue")
);

const imgs = reactive([
  {
    id: 1,
    img: "https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
  },
  {
    id: 2,
    img: "https://images.unsplash.com/photo-1504438190342-5951e134ffee?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8Y2hpbGRyZW58ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
  },
  {
    id: 3,
    img: "https://images.unsplash.com/photo-1502781252888-9143ba7f074e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fGNoaWxkcmVufGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
  },
  {
    id: 4,
    img: "https://images.unsplash.com/photo-1542810634-71277d95dcbb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDV8fGNoaWxkcmVufGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
  },
]);

const goMore = () => {
  router.push("/LoserInfos");
};
</script>

<style lang="less" scoped>
.el-carousel {
  .el-carousel__item img {
    width: 100%;
    height: 100%;
  }
}
.box {
  text-align: center;
  margin-top: 100px;
  margin-bottom: 20px;
  .title {
    font-size: 30px;
    font-weight: 600;
  }
  .more{
    color:rgb(17, 153, 177)
  }
}
</style>
